const ws = new WebSocket('ws://localhost:8080');
        const chatDiv = document.getElementById('chat');

        // WebSocket连接建立成功后的回调函数
        ws.onopen = () => {
            // 当客户端页面刷新时，浏览器会关闭 WebSocket 连接，并重新建立新的连接。内存中的 Map 对象，存储在服务器的内存中。当服务器重启或页面刷新时，内存中的数据会被清空。
            // 如果想要进行刷新页面时就登录的功能，需要将数据存储在数据库或者外部文件中
            // 在用户注册登录完成后，将用户id和用户名保存至本地，在用户打开客户端时，先调取本地存储，检查是否注册登陆过，如果有就无须登录，可以直接发送信息

            // ==========================登录一次后，页面刷新后无需登录=============================
                var user=loadUserInfo()
                var uid=user.split(',')[1] //本地存储的数据格式是：用户名,id,登录(login)
                console.log(user);
                console.log(uid);
                // 如果id不为null，和undefined，将信息发送至服务器登录
                if (uid=='null' ) {
                    console.log(666);                
                }
                else{
                    ws.send(user);
                    console.log(1111);
                }
        };

        // 接收到服务器发来的消息时自动触发
        ws.onmessage = (e) => {
            // 判断服务器传来的是否是json语句，如果是就是注册\登录
            if (isValidJSON(e.data)) {
                const data = JSON.parse(e.data)
                console.log(data);
                // 用户注册时服务器发送的信息
                if (data.type === 'init') {
                    // 这是新注册的账号
                    console.log("分配到的id号是" + data.userid);
                    addMessage('系统', `${data.username}您好，您的Id是：${data.userid}`, 'system');

                    // 注册成功后，将用户的信息保存到本地存储，还未进行到
                    saveUserInfo(data.username,data.userid,'login')

                    // - 'remote'：表示消息来自远程用户（即其他用户）；
                    // - 'local'：表示消息是本地用户自己发送的；
                    // - 'system'：表示系统消息（如用户加入、离开等通知）。
                }
                // 登录成功时服务器发送的信息
                if (data.states == "成功") {
                    console.log('登录成功');
                    console.log(data,data.username,data.userid);
                    
                    // 登录成功后
                    saveUserInfo(data.username,data.userid,'login')
                    // window.location.href = '/chat';
                    const url=location.pathname;
                    console.log(url);
                    
                    if(url==='/login'){
                        location.href=`./chat.html`
                    }
                    else{
                        console.log('已经登录');
                        //登录进入群聊后，还要系统发送信息给服务器，让其他人知道XXX进入群聊
                        ws.send(`system,${data.username} 进入群聊`);
                    }
                }
            }
            // 如果不是，就是、发送信息      
            else{
                console.log(1111);
                
                // 服务器传输信息分割，sender发送者，text发送内容
                const [sender,text]=e.data.split(':',2)
                console.log(sender,text);
                if(sender==='system'){
                    // 如果是系统信息，将XXX进入群聊的信息添加到界面
                    addMessage('system', text);
                }
                else{
                    addMessage(sender, text, 'remote');
                }
                console.log(111);
            }
        };
        
        //添加消息到界面
        function addMessage(sender, text, type) {
            const chatBody = document.getElementById('chatBody');

            // 创建气泡
            const bubble = document.createElement('div');
            if(sender === 'system') {
                bubble.className = 'bubble system';
                bubble.textContent = text;
            }
            else{
                // 创建用户名
                const username = document.createElement('span');
                if(sender=='我'){
                    bubble.className = 'bubble me';

                    username.className = 'username';
                    username.textContent = '我';
                }
                else{
                    bubble.className = 'bubble other';

                    username.className = 'username';
                    username.textContent = sender;
                }
                // 创建消息文本
                const msgText = document.createTextNode(text);

                bubble.appendChild(username);
                bubble.appendChild(msgText);
            }

            
            chatBody.appendChild(bubble);

            // 滚动到底部
            chatBody.scrollTop = chatBody.scrollHeight;

            
        }


        // 用户登录时的发送信息
        function sendLogin() {
            // 输入用户名和用户id
            var uname = document.getElementById('uname').value.trim();
            var userid = document.getElementById('userid').value.trim();
            console.log(uname);
            console.log(userid);
            
            // 如果不为空就向服务器发送
            if (uname && userid) {
                console.log('看看');
                ws.send(uname + ',' + userid+',login');

            }
        }

        // 类似于用户注册成功
        function sedUserName() {
            // 发送用户名后，服务器保存用户名和ID，并发送id给客户端。
            const username = document.getElementById('username').value ;   
            const password = document.getElementById('uid').value ;   
            const password2 = document.getElementById('confirm-password').value ;   
            console.log(username,password,password2);
            
            const regist = document.getElementById('regist');
            const userid='';
            // 接下来就是注册，判断用户名和密码是否符合要求
            if (username||password||password2) {

                // 将用户名发送到服务器
                // ws.send(username+','+userid+',regist');  //加上注册标识  ，  加上空id
                if(password===password2){
                    // 如果两次密码相同，就可以注册成功
                }
                else{
                    console.log('两次密码不一致，请重新输入');
                    return;
                }

            }
            else{
                console.log('用户名、密码不能为空');
                
            }
        }

        // 定义一个用于判断是否是json语句
        function isValidJSON(str) {
            if (typeof str !== 'string') return false;
            try {
                const result = JSON.parse(str);
                return typeof result === 'object' && result !== null;
            } catch (e) {
                return false;
            }
        }
        // 保存用户信息至本地存储
        function saveUserInfo(username, userid,regOrlog) {
            localStorage.setItem('username', username);
            localStorage.setItem('userid', userid);
            localStorage.setItem('regOrlog', regOrlog);
        }
        // 从本地存储调取
        function loadUserInfo() {
            const username = localStorage.getItem('username');
            const userid = localStorage.getItem('userid');
            const regOrlog = localStorage.getItem('regOrlog');
            return `${username},${userid},login`;
        }